<template>
	<view class="home">
		<view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in swipers" :key="item.id">
					<image :src="item.img"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav">
			<view class="item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view :class="item.icons"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="hot_goods">
			<view class="tit">推荐商品</view>
			<!-- 一般用法 -->
			<goods-list :goods="goods"></goods-list>
		</view>
	</view>
</template>

<script>
	import goodsList from "../../components/good-list/good-list.vue"
	export default {
		data() {
			return {
				goods: [],
				swipers: [{
						"id": 1,
						"img": '/static/swipers/lunbo1.jpg'
					},
					{
						"id": 2,
						"img": '/static/swipers/lunbo2.jpg'
					},
					{
						"id": 3,
						"img": '/static/swipers/lunbo3.jpg'
					}
				],
				navs: [{
						icons: "iconfont icon-ziyuan",
						title: "HM超市",
						path: "/pages/goods/goods"
					},
					{
						icons: "iconfont icon-shipin",
						title: "学习视频",
						path: "/pages/videos/videos"
					},
					{
						icons: "iconfont icon-tupian",
						title: "社区图片",
						path: "/pages/pics/pics"
					},
					{
						icons: "iconfont icon-guanyuwomen",
						title: "联系我们",
						path: "/pages/contact/contact"
					}

				],
				sampleGoods: [{
					"title": "华为（HUAWEI）荣耀6Plus 16G双4G版",
					"add_time": "2015-04-19T16:51:03.000Z",
					"zhaiyao": "荣耀6 Plus，该机型分为两款型号，分别为PE-",
					"click": 0,
					"img_url": '/static/logo.png',
					"sell_price": 2195,
					"market_price": 2499,
					"stock_quantity": 60
				}]

			}
		},
		onLoad() {
			this.getHotGoods()
		},
		components: {
			"goods-list": goodsList
		},
		methods: {
			navItemClick(url) {
				uni.navigateTo({
					url
				})
			},
			async getHotGoods() {
				this.goods = this.sampleGoods
				for (var i = 0; i < 3; i++) {
					this.goods = [...this.goods, ...this.sampleGoods]
				}
			}

		}
	}
</script>

<style lang="scss">
	.home {
		swiper {
			height: 380rpx;

			image {
				width: 750rpx;
				height: 380rpx;
			}
		}

		.nav {
			display: flex;
			align-items: center;

			.item {
				width: 25%;
				text-align: center;

				view {
					background: #3c3c3c;
					line-height: 120rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 90px;
					margin: 10px auto;
				}

				text {
					font-size: 15px;
				}
			}

			.iconfont {
				font-size: 25px;
				color: #fff;
				height: 50px;
			}

			.icon-tupian {
				font-size: 20px;
			}
		}

		.hot_goods {
			background: #eee;

			.tit {
				border-top: 2px solid #eee;
				border-bottom: 2px solid #eee;
				margin-top: 20px;
				margin-bottom: 3px;
				color: #3c3c3c;
				height: 50px;
				line-height: 50px;
				text-align: center;
				letter-spacing: 20px;
				background: #fff;
			}


		}
	}
</style>